<template>
	<div class="all">
		<div class="clubBg">
			<div class="clubleft">
				<div class="">
					<img v-if="detailData.Ico!=null" :src="detailData.Ico ? requestUrl+(detailData.Ico.substring(detailData.Ico.lastIndexOf('Upload'))): ''" />
					<img v-else src="../../assets/home/banner1.png" />
				</div>
				<div>
					<div class="clubTitle">{{detailData.Name}}</div>
					<div class="clubtips">Club name</div>
				</div>
				
			</div>
			<!-- <div class="cimg" style="margin-left: 170px;">
				<div class="cd-btn" v-if="Number($route.query.Type)==1">
					<div class="cd-btn-btn" @click="JoinActivity('UserJoinActivity')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon3.png" />
						加入活动
					</div>
					<div class="cd-btn-btn" @click="JoinActivity('NoticeJoin')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon2.png" />
						新闻公告
					</div>
					<div class="cd-btn-btn" @click="QuitClub()" v-if="$route.query.IsRetrun===true||$route.query.IsRetrun==='true'">
						<img class="xiaotubiao" src="../../assets/icon/home/icon5.png" />
						申请退出
					</div>
				</div>
				<div class="cd-btn" v-if="Number($route.query.Type)==2">
					<div class="cd-btn-btn" @click="JoinActivity('Membermanage')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon1.png" />
						成员管理
					</div>
					<div class="cd-btn-btn" @click="JoinActivity('ApplyList')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon7.png" />
						申请人
					</div>
					<div class="cd-btn-btn" @click="JoinActivity('UserActivitymanage')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon6.png" />
						活动管理
					</div>
					<div class="cd-btn-btn" @click="JoinActivity('NoticeManage')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon4.png" />
						公告类型
					</div>
					<div class="cd-btn-btn" @click="JoinActivity('NoticeJoin')">
						<img class="xiaotubiao" src="../../assets/icon/home/icon2.png" />
						新闻公告
					</div>
				</div>
			</div> -->
		</div>
		<div class="main">
			<div class="mainleft">
				<div class="leftTtitle"><span></span>基础信息</div>
				<div class="leftmain">
					<img src="../../assets/home/banner3.png" style="width: 245px;height: 200px;" />
					<div class="leftbox">
						<div class="leftlist" v-for="(item,index) in detailList">
							<span>{{ item.key }}:</span><span>{{ item.val }}</span>
						</div>
					</div>
				</div>
				<div class="joinUS"
					v-if="!isMember && (detailData.PeopleNum<0 || detailData.MemberNum<detailData.PeopleNum)">
					加入我们
				</div>
			</div>
			<div class="mainleft">
				<div class="leftTtitle"><span></span>新闻公告
					<div class="moremore" @click="Notice1">更多></div>
				</div>
				<div class="">
					<div class="gonggao">
						<div class="gonggaolist" v-for="(item,index) in NewsList" v-if="index<10">
							<div>{{item.Title}}</div>
							<div>{{item.AddTime}}</div>
						</div>
					</div>
					<div class="nothing" v-if="NewsList.length==0">暂无数据</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="mainleft" style="width: 100%;">
				<div class="leftTtitle"><span></span>历史活动
					<!-- 	<div class="moremore">更多></div> -->
				</div>
				<div class="">
					<div class="huodong">
						<div class="huodonglist" v-for="(item,index) in activtyList">
							<div class="imgbox">
								<img v-if="item.Ico!=null" :src="requestUrl+(item.Ico.substring(item.Ico.lastIndexOf('Upload')))" />
								<img v-else src="../../assets/home/tubiao.png" />
							</div>
							<div class="huodongtxt">
								<div class="huodongTiltle">{{item.Title}}</div>
								<div class="huodongtxtbottom">发起时间：{{item.AddTime}} 人数：{{item.MemberNum}}
									状态：{{item.StateName}}</div>
							</div>
						</div>
					</div>
					<div class="nothing" v-if="activtyList.length==0">暂无数据</div>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:page-sizes="pagination.pageSizeOptions" :current-page="pagination.currentPage"
						:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total"></el-pagination>
				</div>
			</div>
			<!-- <OutClub v-if="OutClubStatus" :text="textClub" @closeFun="closeFun1"></OutClub> -->
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Cache from '@/utils/cache';
	// import OutClub from './OutClub/OutClub.vue';
	import {
		UserGetClubDetail,
		GetClubMemberListManage,
		GetClubTeacherListManage,
		GetActivityPageList,
		GetClubNewsList
	} from '@/api/follow';
	export default {
		components: {
			// OutClub
		},
		props: {
			text: Object,
			nowTime: String
		},
		watch: {
			text: function(text) {
				// this.followPage(text.ID);
			},
		},
		data() {
			return {
				isMember: true,
				textClub:{},
				pagination: {
					currentPage: 1,
					pageSize: 2,
					pageSizeOptions: ['2'],
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				requestUrl: this.global.requestUrl,
				Title: '俱乐部详情',
				spinshow: true,
				detail: {},
				detailData: {},
				detailList: [],
				teacherNum: 0,
				memberNum: 0,
				activeNum: 0,
				previewVisible: false,
				previewImage: '',
				followID: '',
				myAboutFollowProgressSubmitHandlerLoading: false,
				NewsList: [],
				activtyList: [],
				myInfo:Cache.get('myInfo'),
				OutClubStatus:false,
			};
		},
		created() {
			this.followPage(this.$route.query.ID);
			this.getNews(this.$route.query.ID)
			// this.followPage('4414b40f043349a786e25ac464950fdb');
			// this.getNews('0d431fb0c6f24d3cbd8dc860a8ec78f1');
			// this.followPage('97b27546c76441cb9694b07e6ddb4cf4');
		},
		methods: {
			Notice1(text) {
				this.$router.push({
					name: 'NoticeJoin',
					query: {
						//	ID:"4414b40f043349a786e25ac464950fdb"
						ID: this.$route.query.ID
					}
				});
			},
			closeFun1(){
				this.OutClubStatus = false
			},
			QuitClub() {
				this.textClub = {
					ID:this.$route.query.ID
				};
				this.OutClubStatus = true;
			},
			JoinActivity(text) {
				this.$router.push({
					name: text,
					query: {
						ID: this.$route.query.ID,
						Name: this.$route.query.Name,
						ChairmanNo: this.$route.query.ChargeUserNo,
						State: this.$route.query.IsAgreeApplyActivity,
						Type:1
					}
				});
			},
			async getNews(id) {
				let res = await GetClubNewsList({
					clubID: id,
					state:2
				});
				this.NewsList = res.data.data
			},
			closeFunction(flag) {
				this.detailList = [];
				this.spinshow = true;
				this.$emit('closeFun', flag);
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.followPage('4414b40f043349a786e25ac464950fdb')
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.followPage('4414b40f043349a786e25ac464950fdb')
			},
			moment,
			async followPage(id) {
				let res = await UserGetClubDetail({
					id: id
				});
				this.isMember = res.data.isMember
				let {
					data: {
						Name,
						DpeartName,
						PorjectName,
						CairmanName,
						CollegeExamUserName,
						SchoolExamUserName
					}
				} = res.data;
				this.detailData = res.data.data;
				let res1 = await GetClubTeacherListManage({
					clubID: id
				});
				if(res1.data.code===0){
					this.teacherNum = res1.data.data.length + '人'
				}
				let res2 = await GetClubMemberListManage({
					clubID: id
				});
				if(res2.data.code==0){
					this.memberNum = res2.data.pageInfo.TotalItemCount + '人'
				}
				let res3 = await GetActivityPageList({
					clubID: id,
					pageIndex: this.pagination.currentPage,
					pageSize: this.pagination.pageSize
				});
				
				if(res3.data.code==0){
					const pagination = {
						...this.pagination
					};
					pagination.total = res3.data.pageInfo.TotalItemCount;
					this.pagination = pagination;
					this.activeNum = res3.data.pageInfo.TotalItemCount + '个'
					this.activtyList = res3.data.data
				}
				// let middleKey = ['名称','部门','项目','负责人','院审批人','中心审批人'];
				// let miidle = [Name,DpeartName,PorjectName,CairmanName,CollegeExamUserName,SchoolExamUserName];
				let middleKey = ['名称', '部门', '项目', '负责人'];
				let miidle = [Name, DpeartName, PorjectName, CairmanName];
				this.detailList = miidle.map((v, i) => {
					return {
						key: middleKey[i],
						val: v
					};
				});
				console.log(this.detailList)
				this.detail = res.data.data
				this.spinshow = false;
			},
			tabClickHandler(path) {
				this.$router.push({
					name: path,
					query: {
						ID: this.$route.query.ID
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.cimg {
		display: flex;
		align-items: center;
		
		.cd-btn{
			display: flex;
			flex-wrap: wrap;
		}
		.cd-btn-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2px 7px;
			background: rgba(65,105,224,0.1000);
			border-radius: 14px 14px 14px 14px;
			opacity: 1;
			font-size: 12px;
			color: #0F3193;
			cursor: pointer;
			margin-right: 8px;
			margin-top: 7px;
			i{
				margin-right: 3px;
			}
		}
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		text-align: center;
		position: relative;
		.ant-avatar {
			width: 40px;
			height:40px;
			
		}
	}
	
	.cd-btn .cd-btn-btn img{
		width: 23px !important;
		height: 23px;
		margin-right: 0;
	}
	.ant-layout-content {
		background-color: #f7f7f7;
	}

	/deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;

		/deep/.ant-form-item-label {
			width: 100px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}

		/deep/.ant-form-item-control-wrapper {
			flex: 1;
		}
	}

	/deep/.ant-table-thead>tr>th,
	/deep/.ant-table-tbody>tr>td {
		padding: 5px;
	}

	/deep/.ant-table-pagination.ant-pagination {
		float: left;
		// display:none;
	}

	/deep/.ant-table-body tr th:first-child {
		display: none;
	}

	/deep/.ant-table-body tr td:first-child {
		display: none;
	}

	/deep/.el-table th.is-leaf {
		background: #fafafa;
	}

	/deep/.el-table td,
	/deep/.el-table th {
		padding: 5px;
	}

	/deep/.ant-table-tbody .ant-table-row-cell-break-word:nth-child(2) {
		position: relative;

		.con {
			position: absolute;
			top: 40px;
			left: 0px;
			z-index: 999;
			background: #fff;
			width: 96%;
			padding: 1% 2%;
		}
	}

	.option {
		margin-top: 10px;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.option .btn {
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		float: left;
		background: #1890ff;
		color: #fff;
		margin-right: 10px;
		border-radius: 3px;
		cursor: pointer;
		border: none;
	}

	.foot {
		text-align: center;
		margin-top: 100px;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.all {
		background-color: #f7f7f7;
		padding: 20px;
	}

	.joinok {
		width: 100%;
		text-align: center;
		margin-top: 20px;
	}

	i:hover {
		cursor: pointer;
	}

	/deep/.ant-timeline {
		line-height: none;
	}

	/deep/.ant-timeline-item {
		padding: 0;
		// height: 25px;
		// line-height: 25px;
	}

	.clubBg {
		width: 100%;
		height: 230px;
		background: url('../../assets/home/banner1.png') no-repeat;
		background-size: 100% 100%;
		// box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.0900);
		// border-radius: 16px 16px 16px 16px;
		padding-top: 54px;
	}

	.clubleft {
		display: flex;
		margin-left: 50px;

		// margin-top: 54px;
		img {
			width: 94px;
			height: 94px;
			border-radius: 21px;
			margin-right: 30px;
		}

		.clubTitle {
			color: #333333;
			font-size: 32px;
			font-weight: bold;
		}

		.clubtips {
			font-size: 26px;
		}
	}

	.main {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.mainleft {
		box-sizing: border-box;
		padding: 20px;
		background-color: #fff;
		width: 48%;
		height: 448px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.0900);
		border-radius: 16px 16px 16px 16px;
		opacity: 1;

		.leftTtitle {
			display: flex;
			align-items: center;
			font-size: 14px;
			font-weight: bold;
			color: #000000;
			border-bottom: 1px solid #A8A8A8;
			padding-bottom: 18px;
			width: 100%;
			position: relative;

			span {
				display: inline-block;
				width: 4px;
				height: 15px;
				background: #2E45AE;
				border-radius: 2px 2px 2px 2px;
				opacity: 1;
				margin-right: 5px;
			}

			.moremore {
				color: #0177FB;
				font-size: 14px;
				position: absolute;
				right: 0;
				cursor: pointer;
			}
		}

		.leftbox {
			padding-top: 20px;
		}

		.leftlist {
			display: flex;
			padding: 9px 0;
		}

		.leftlist span:first-child {
			display: flex;
			width: 104px;
			color: #818181;
			font-size: 14px;
		}

		.leftlist span:nth-child(2) {
			color: #000000;
			font-size: 14px;
		}

	}

	.mainRight {
		margin-left: 40px;
		background-color: #FFFFFF;
		width: 680px;
		height: 448px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.0900);
		border-radius: 16px 16px 16px 16px;
		opacity: 1;
		box-sizing: border-box;
		padding: 20px;
	}

	.lingbgbox {
		height: 78px;
		background: rgba(238, 238, 238, 0.4000);
		border-radius: 12px 12px 12px 12px;
		opacity: 1;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.main {
		.btn {
			width: 120px;
			height: 40px;
			background: rgba(185, 185, 185, 0.2600);
			box-shadow: 0px 3px 8px 1px rgba(46, 69, 174, 0.3000);
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			display: flex;
			align-items: center;

			img {
				display: inline-block;
				width: 20px;
				height: 20px;
				margin-right: 5px;
				color: #0F3193;
				font-size: 14px;
			}
		}
	}

	.hoverbtn {
		background-color: #4169E0;
		color: #FFFFFF;
	}

	.leftmain {
		display: flex;
		justify-content: flex-start;

		img {
			margin-right: 30px;
			margin-top: 18px;
		}
	}

	.joinUS {
		width: 303px;
		height: 40px;
		background: #4169E0;
		box-shadow: 0px 3px 8px 1px rgba(46, 69, 174, 0.3000);
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 35px;
		cursor: pointer;
	}

	.gonggao {
		width: 100%;
	}

	.gonggaolist {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 17px;
		font-size: 12px;
		font-weight: 400;
		color: #333333;
		cursor: pointer;
	}

	.gonggaolist:hover {
		color: #0F3193;
		font-weight: bold;
	}

	.gonggaolist div:first-child {
		width: 300px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.nothing {
		text-align: center;
		height: 120px;
		line-height: 90px;
		color: #9DA1BA;

		img {
			width: 112px;
			height: 66px;
		}

		div {
			color: #A8A8A8;
			font-size: 12px;
			height: 25px;
			line-height: 25px;
			text-align: center;
		}
	}

	.huodonglist {
		display: flex;

		img {
			width: 90px;
			height: 90px;
			margin-right: 20px;
		}

		.huodongtxt {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.huodongTiltle {
			color: #333333;
			font-size: 18px;
			font-weight: bold;
		}

		.huodongtxtbottom {
			color: #333333;
			font-size: 18px;
		}

		margin-top: 30px;
	}
</style>
